<template>
  <div class="advert">
    <img
      class="advert__slogan"
      src="https://fast-learn.oss-cn-hangzhou.aliyuncs.com/tb/slogan.svg"
    />
    <div class="advert__goods">
      <van-image
        class="advert__goods__item"
        v-for="item in data"
        :key="item.id"
        :src="item.imageUrl"
      />
    </div>
    <img
      class="advert__footer"
      src="https://fast-learn.oss-cn-hangzhou.aliyuncs.com/tb/link.svg"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      data: []
    }
  },
  computed: {
    ...mapGetters(['homeList'])
  },
  watch: {
    'homeList.data.banner.right': {
      immediate: true,
      handler (val) {
        this.data = val
        console.log('获取数据', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.advert {
  width: 342px;
  height: 458px;
  background: #f93d61;
  position: relative;
  border-radius: 12px;

  &__slogan{
 border-radius: 12px;
  }

  &__goods {
    width: 330px;
    height: 350px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    &__item {
      width: 162px;
      height: 172px;
      background: #fff;
      border-radius: 8px;
      background-repeat: no-repeat;
      &:nth-child(2n) {
        margin-left: 6px !important;
      }
    }
  }
  &__slogan {
    width: 342px;
    height: 85.18px;
  }
  &__footer {
    width: 368px;
    height: 84px;
    position: absolute;
    bottom: -40px;
    left: -14px;
  }
}
</style>
